<template>
  <div class="departments">
    <el-card class="box-card">
      <template #header>
        <span>组织结构</span>
      </template>
      <top :item="topInfo" :istop="true" />
      <hr>
      <el-tree :data="treeData" :props="{label:'name'}" default-expand-all>
        <!-- 树形结构中自定义一个默认插槽可以传值data -->
        <template v-slot="{ data }">
          <!-- <div class="top" style="width:100%">
            <div class="company">{{ data.name }}</div>
            <div class="mannergr">{{ data.mannerger }}</div>
            <div class="option">
              <el-dropdown>
                <span>操作<i class="el-icon-arrow-down el-icon--right" /></span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                    <el-dropdown-item>查看部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div> -->
          <top :item="data" @getData="getData" />
        </template>
      </el-tree>

    </el-card>
    <!-- 将获取到的组织架构值都给弹出框 -->
    <add :inittreedata="inittreedata" @getData="getData" />
  </div>

</template>

<script>
import top from '@/views/departments/components/top.vue'
import { companydepartment } from '@/api/deparments.js'
import add from '@/views/departments/components/add.vue'
export default {
  components: {
    top,
    add
  },
  data() {
    return {
      topInfo: {
        name: '传智播客',
        mannerger: '负责人',
        id: ''
      },
      data: [{
        name: '事业部',
        mannerger: '高丽军',
        children: [{
          name: '北京事业部',
          mannerger: '高丽军',
          children: [{
            name: '111',
            mannerger: '高丽军'
          }]
        }]
      }],
      //   定义一个变量存储组织架构数据
      treeData: [],
      //   接收所有组织架构信息----传值到弹框组件中---用于判断
      inittreedata: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //   请求接口信息，获取组织架构
    async  getData() {
      const res = await companydepartment()
      this.inittreedata = res.data.depts
      console.log(this.inittreedata)
      this.treeData = this.getTreeData(res.data.depts, '')
      this.topInfo.name = res.data.companyName
      this.topInfo.mannerger = res.data.companyManage
    },
    getTreeData(arr, pid = '') {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.getTreeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.departments{
    padding: 15px;

}
</style>
